<template>
	<view class="pageview">
		<zx-nav title="申请售后" bg="#fff"></zx-nav>
		<video
			id="prew_video"
			direction="0"
			:src="videoSrc"
			@fullscreenchange="bindVideoScreenChange"
			:poster="poster"
			custom-cache="false"
			object-fit="cover"
			style="position: fixed;left: -50%; top: -50%;"
			controls
		></video>

		<view class="main">
			<view class="goodsinfo padding-top">
				<view class="u-flex">
					<view class="imgbox"><image :src="orderInfo.img_url[0] + '?imageView2/0/w/100'" mode="widthFix"></image></view>
					<view class="flex-sub u-flex u-flex-column">
						<view class="name u-flex justify-between">
							<text>{{ orderInfo.name }}</text>
							<text class="num">×{{ orderInfo.qty }}</text>
						</view>
						<view class="tip flex-sub">{{ orderInfo.title }}</view>
						<view class="u-flex justify-between">
							<view class="price" style="font-size: 32rpx;">￥{{ orderInfo.price }}</view>
							<view class="u-flex align-center" style="font-size: 26rpx;">
								<text>总金额：</text>
								<view class="price">￥{{ (orderInfo.price * orderInfo.qty).toFixed(2) }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="picker flex align-center">
				<view class="title">售后类型</view>
				<view class="txt flex-sub">
					<picker mode="selector" :range="statusList" @change="PickerChange" :value="status" range-key="name">
						<view class="pickertxt">
							<text v-if="status != null">{{ status == 0 ? '质量售后' : '缺货售后' }}</text>
							<text v-else>请选择</text>
						</view>
					</picker>
				</view>
				<image src="/static/right.png" mode="widthFix" class="arrow"></image>
			</view>
			<view class="infotip">
				<view class="u-primary">
					<view>质量问题需上传</view>
					<view>1，所有投诉货品的全景照，即一张照片上,要能看出所有货损的情况。照片上有多少数量，即受理多少售后</view>
					<view>2，投诉鲜花问题的特写照片以及该花材外包装的清晰照。</view>
					<view>3，包装纸箱有破损情况的，务必上传外包装的破损照。</view>
					<view>4，最多可上传9个图片或1个视频。</view>
				</view>
				<view class="text-green margin-top-sm">缺货售后需上传全景图，并在下方文本框内注明缺货的产品以及数量。</view>
			</view>
			<view class="goodsinfo">
				<view class="flex align-center margin-top">
					<view class="title">售后金额</view>
					<input class="flex-sub phone" @input="oninput" type="digit" value="" placeholder="请填写售后金额/可修改" v-model="afterSaleInfo.amount" />
				</view>
				<view class="u-flex u-flex-wrap">
					<view v-for="(item, index) in uploadImgList" style="width: 33.33%;">
						<view class="uploadImg">
							<tui-upload
								@complete="complete"
								:extendsParam="{
									index: index
								}"
								:limit="1"
								:uploadType="item.uploadType"
								:sourceType="['camera']"
								@previewVideo="previewVideo"
							></tui-upload>
							<view class="u-m-t-10">
								{{ item.title }}
								<text class="u-warning" v-if="item.isRequired">*</text>
							</view>
							<view>({{ item.subtitle }})</view>
						</view>
					</view>
				</view>
				<view class="comment-con flex"><textarea class="flex-sub" placeholder="请简单描述您的售后原因" v-model="afterSaleInfo.info"></textarea></view>
			</view>
			<view class="btnBar"><u-button @click="submit" shape="circle" :disabled="btnDisabled" :loading="btnLoading" type="success">提交</u-button></view>
		</view>
		<u-gap height="50"></u-gap>
		<u-popup :show="show" @close="show = false" mode="center" :round="10">
			<view class="cu-dialog">
				<view class="u-flex align-center">
					<image src="/static/icon30.png" mode="widthFix"></image>
					<text>售后金额必须小于商品金额</text>
				</view>
				<view class="btn" @click="sure">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import tuiUpload from '@/components/tui-upload/uploadImgOrVideo.vue';
import tuiRate from '@/components/rate/rate';
export default {
	data() {
		return {
			tabIndex: 1,
			type: 0,
			index: 4,
			show: false,
			statusList: [
				{
					name: '质量售后',
					id: 1
				},
				{
					name: '缺货售后',
					id: 2
				}
			],
			status: null,
			orderInfo: {},
			afterSaleInfo: {
				amount: null,
				img_url: '',
				info: ''
			},
			imgStatus: 1,
			uploadtype: 1, //图片还是视频
			videoSrc: '',
			poster: '',
			uploadImgList: [
				{
					title: '商家标签',
					subtitle: '缺货请拍全景图',
					isRequired: true,
					url: '',
					uploadType: 'img'
				},
				{
					title: '数量平铺图',
					subtitle: '可直观看到数量',
					isRequired: false,
					url: '',
					uploadType: 'img'
				},
				{
					title: '问题特写图',
					subtitle: '售后花材',
					isRequired: false,
					url: '',
					uploadType: 'img'
				},
				{
					title: '细节展示图',
					subtitle: '售后花材',
					isRequired: false,
					url: '',
					uploadType: 'img'
				},
				{
					title: '更多细节图',
					subtitle: '售后花材',
					isRequired: false,
					url: '',
					uploadType: 'img'
				},
				{
					title: '视频补充',
					subtitle: '非必要',
					isRequired: false,
					url: '',
					uploadType: 'video'
				}
			]
		};
	},
	components: {
		tuiUpload,
		tuiRate
	},
	onLoad() {
		this.orderInfo = JSON.parse(uni.getStorageSync('orderInfo'));
	},
	onReady: function(res) {
		// #ifndef MP-ALIPAY
		this.videoContext = uni.createVideoContext('prew_video');
		// #endif
	},
	methods: {
		oninput(e) {
			this.$nextTick(() => {
				let val = e.target.value.toString();
				val = val.replace(/[^\d.]/g, ''); //清除"数字"和"."以外的字符
				val = val.replace(/\.{2,}/g, '.'); //只保留第一个. 清除多余的
				val = val.replace(/^0+\./g, '0.');
				val = val.match(/^0+[1-9]+/) ? (val = val.replace(/^0+/g, '')) : val;
				val = val.match(/^\d*(\.?\d{0,2})/g)[0] || '';

				this.afterSaleInfo.amount = val;
			});
		},
		complete({ status, imgArr, type, extendsParam }) {
			// this.afterSaleInfo.img_url = imgArr;
			this.uploadImgList[extendsParam.index].url = imgArr[0];
			this.uploadtype = type;
			this.imgStatus = status;
			console.log('this.uploadImgList',this.uploadImgList)
		},
		//选择货物状态
		PickerChange(e) {
			console.log('状态', e);
			this.status = e.target.value;
		},
		//确认售后金额不能于商品金额
		sure() {
			this.show = false;
		},
		//确定申请售后
		submit() {
			let $me = this;
			if (this.status == null) {
				uni.showToast({
					title: '请选择售后类型',
					icon: 'none'
				});
				return false;
			}
			if (this.imgStatus != 1) {
				uni.showToast({
					title: this.imgStatus == 2 ? '请等待图片上传成功' : '请删除上传失败的图片'
				});
				return false;
			}
			for (var key in this.afterSaleInfo) {
				if (key === 'amount') {
					if (this.afterSaleInfo[key] == null || !this.afterSaleInfo[key]) {
						uni.showToast({
							title: '请填写售后金额',
							icon: 'none'
						});
						return false;
					} else {
						if (parseFloat(this.afterSaleInfo[key]) > parseFloat(this.orderInfo.goods_amount)) {
							$me.show = true;
							return false;
						}
					}
				}
				// if (this.status == 0 && key == 'img_url' && !this.afterSaleInfo[key]) {
				// 	uni.showToast({
				// 		title: '请上传至少一张商品图片或视频',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				if (key == 'info' && !this.afterSaleInfo[key]) {
					uni.showToast({
						title: '请填写描述',
						icon: 'none'
					});
					return false;
				}
			}
			this.afterSaleInfo.img_url = this.uploadImgList.map(item => item.url);
			console.log('this.afterSaleInfo.img_url',this.afterSaleInfo.img_url,this.uploadImgList)
			if (!this.afterSaleInfo.img_url[0]) {
				uni.showToast({
					title: '请上传全景图片',
					icon: 'none'
				});
				return false;
			}
			let param = {
				img_url: this.afterSaleInfo.img_url,
				cut: this.statusList[this.status].id,
				info: this.afterSaleInfo.info,
				amount: this.afterSaleInfo.amount
			};

			console.log('param', param);
			// return false;
			$me.$postAction($me.$api.orderAftersale + this.orderInfo.order_product_id, param).then(da => {
				if (da.code == 0) {
					uni.showToast({
						title: '提交成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/order/afterSales/list'
						});
					}, 200);
				} else {
					uni.showToast({
						title: da.msg,
						icon: 'none'
					});
				}
			});
		},
		previewVideo(videoSrc) {
			this.poster = videoSrc + '?vframe/jpg/offset/1';
			var videoContext = this.videoContext;
			this.videoSrc = '';
			this.videoSrc = videoSrc;
			videoContext.seek(0);
			videoContext.play();
			setTimeout(function() {
				videoContext.requestFullScreen();
			}, 100);
		},

		/**
		 * 全屏改变
		 */
		bindVideoScreenChange: function(e) {
			var status = e.mp.detail.fullScreen;
			console.log(status);
			if (!status) {
				var videoContext = this.videoContext;
				videoContext.seek(0);
				videoContext.pause();
				// this.videoSrc = '';
				this.showVideo = false;
			} else {
				this.videoContext.play();
				this.showVideo = true;
			}
		}
	}
};
</script>

<style lang="scss">
page,
.pageview {
	height: 100%;
	width: 100%;
	// background: #f0f0f0;
	background: #fff;
	// overflow: hidden;
	.infotip {
		padding: 30rpx 0;
		font-size: 26upx;
		line-height: 52upx;
		.text-green {
			color: #20b445;
		}
	}
	.goodsinfo {
		background: #fff;
		color: #000;
		padding: 30upx 0 0;

		.name {
			font-size: 30upx;
			font-weight: bold;
		}

		.imgbox {
			width: 160upx;
			height: 160upx;
			margin-right: 30upx;

			image {
				height: 100%;
				width: 100%;
				display: block;
			}
		}

		.num,
		.price {
			color: #e03d3e;
			font-size: 28upx;
			font-weight: bold;
		}

		.tip {
			color: #b3b6be;
			font-size: 20upx;
			padding: 10upx 0;
		}

		.shopinfo {
			font-size: 22upx;
			color: #666;

			.tag {
				color: #fff;
				// background: #e60012;
				// line-height: 25upx;
				// height: 25upx;
				width: 55upx;
				display: inline-block;
				padding: 0 10upx;
				border-radius: 5upx;
				font-size: 16upx;
				margin-right: 10upx;
			}

			.shopname {
				display: inline-block;
			}

			.favstate {
				color: #fb8442;
			}
		}

		.comment-con {
			margin-top: 50upx;
			margin-bottom: 48upx;
		}

		textarea,
		input {
			padding: 40upx 30upx;
			border: 1px solid #cdcdcd;
			border-radius: 10upx;
			height: 200upx;
			font-size: 28upx;
		}

		input {
			padding: 0 20upx;
			line-height: 65upx;
			height: 65upx;
			margin-left: 30upx;
		}

		.uploadImg {
			margin: 24upx auto 0;
			font-size: 20upx;
			text-align: center;
			color: #8b8b8b;
			line-height: 36upx;
		}

		.title {
			color: #000;
			font-size: 28upx;
			font-weight: bold;
		}
	}

	.picker {
		font-size: 26upx;
		color: #000;
		margin-top: 40upx;
		padding: 0 28upx;
		border-top: 1px solid #f0f0f0;
		border-bottom: 1px solid #f0f0f0;
		.txt {
			font-size: 22upx;
			margin-left: 30upx;
		}
		.pickertxt {
			height: 100rpx;
			line-height: 100rpx;
			font-size: 26rpx;
		}
		.arrow {
			width: 28upx;
			height: 28upx;
		}
	}

	.main {
		overflow: auto;
		margin-top: 20upx;
		.btnBar {
			margin: 0 94upx;
		}
	}
}

.cu-dialog {
	padding: 110upx 30upx 90upx;
	text-align: center;
	color: #000;
	font-size: 32upx;

	image {
		width: 40upx;
		margin-right: 20upx;
		display: inline-block;
	}

	.btn {
		margin: 110upx auto 0;
		color: #fff;
		line-height: 70upx;
		width: 330upx;
		text-align: center;
		border-radius: 10upx;
		font-size: 30upx;
		background-image: linear-gradient(90deg, #fb9549, #fc733b);
	}
}
</style>
